/*
 * @Author: hyman
 * @Date: 2022-01-22 15:17:57
 * @LastEditors: hyman
 * @LastEditTime: 2022-02-10 12:22:18
 * @Description: 请填写简介
 */
import React from 'react'
import { useNavigate, useLocation} from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import {
    AppOutline,
    AddCircleOutline,
    UserOutline,
  } from 'antd-mobile-icons'

const Tab = () =>{
    const tabs = [
        {
          key: '/',
          title: '首页',
          icon: <AppOutline />,
        },
        {
          key: '/contact/contact/index',
          title: '新建',
          icon: <AddCircleOutline />,
        },
        {
          key: '/user/base/index',
          title: '我的',
          icon: <UserOutline />,
        },
      ]
      let navigate = useNavigate()
      const location = useLocation()
      const { pathname } = location
      const setRouteActive = (value) => {
        navigate(value)
      }

        return (
            <div className="tabbar">
                <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}  className="item">
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        )

}

export default Tab